<template>
    <div class="boxs">
        <a-tabs v-model:activeKey="activeKey" type="card" :destroyInactiveTabPane="true">
            <a-tab-pane key="static" tab="成交额统计">

                <div style="background-color: #ececec; padding: 20px;font-size: 25px;" v-if="maxData.length > 0">
                    <a-row :gutter="16">
                        <a-col :span="6">
                            <a-card :bordered="false">
                                <template #title>
                                    <span class="title">今日最高</span>
                                </template>
                                <p class="p">
                                    {{
                                        maxData.sort((a, b) => b['today_sales_amount'] -
                                            a['today_sales_amount'])[0].technician_name
                                        + ":" }}
                                    <span class="num">{{
                                        maxData.sort((a, b) => a['today_sales_amount'] -
                                            b['today_sales_amount'])[0]['today_sales_amount']
                                    }}</span>
                                </p>
                            </a-card>
                        </a-col>
                        <a-col :span="6">
                            <a-card :bordered="false">
                                <template #title>
                                    <span class="title">昨日最高</span>
                                </template>
                                <p class="p">
                                    {{
                                        maxData.sort((a, b) => b['yesterday_sales_amount'] -
                                            a['yesterday_sales_amount'])[0].technician_name
                                        + ":" }}
                                    <span class="num">{{
                                        maxData.sort((a, b) => b['yesterday_sales_amount'] -
                                            a['yesterday_sales_amount'])[0]['yesterday_sales_amount']
                                    }}</span>
                                </p>
                            </a-card>
                        </a-col>
                        <a-col :span="6">
                            <a-card :bordered="false">
                                <template #title>
                                    <span class="title">本月最高</span>
                                </template>
                                <p class="p">
                                    {{
                                        maxData.sort((a, b) => b['current_month_sales_amount'] -
                                            a['current_month_sales_amount'])[0].technician_name
                                        + ":" }}
                                    <span class="num">{{
                                        maxData.sort((a, b) => b['current_month_sales_amount'] -
                                            a['current_month_sales_amount'])[0]['current_month_sales_amount']
                                    }}</span>
                                </p>

                            </a-card>
                        </a-col>
                        <a-col :span="6">
                            <a-card :bordered="false">
                                <template #title>
                                    <span class="title">上月最高</span>
                                </template>
                                <p class="p">
                                    {{
                                        maxData.sort((a, b) => b['last_month_sales_amount'] -
                                            a['last_month_sales_amount'])[0].technician_name
                                        + ":" }}
                                    <span class="num">{{
                                        maxData.sort((a, b) => b['last_month_sales_amount'] -
                                            a['last_month_sales_amount'])[0]['last_month_sales_amount']
                                    }}</span>
                                </p>

                            </a-card>
                        </a-col>
                    </a-row>
                </div>
                <div v-else>暂无数据</div>
            </a-tab-pane>
            <a-tab-pane key="biao" tab="技师统计">
                <div style='margin-bottom: 20px;'>
                    <a-form ref="formRef" name="advanced_search" class="ant-advanced-search-form" :model="formState"
                        @finish="onFinish">
                        <a-row :gutter="24">
                            <a-col :span="4">
                                <a-form-item name="name" label="名称">
                                    <a-input v-model:value="formState[`name`]" :placeholder="'请输入'"></a-input>
                                </a-form-item>

                            </a-col>
                            <a-col :span="4">
                                <a-form-item name="phone" label="手机号">
                                    <a-input v-model:value="formState[`phone`]" :placeholder="'请输入'"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="4">
                                <a-form-item name="superior" label="上级代理">
                                    <a-input v-model:value="formState[`superior`]" :placeholder="'请输入'"></a-input>
                                </a-form-item>
                            </a-col>

                            <a-col :span="4">
                                <a-form-item name="gender" label="性别">
                                    <a-radio-group v-model:value="formState['gender']">
                                        <a-radio-button value="">全部</a-radio-button>
                                        <a-radio-button value="0">女</a-radio-button>
                                        <a-radio-button value="1">男</a-radio-button>
                                    </a-radio-group>
                                </a-form-item>
                            </a-col>
                            <a-col :span="4">
                                <a-form-item name="account_status" label="冻结">
                                    <a-radio-group v-model:value="formState['account_status']">
                                        <a-radio-button value="">全部</a-radio-button>
                                        <a-radio-button value="1">冻结</a-radio-button>
                                        <a-radio-button value="0">正常</a-radio-button>
                                    </a-radio-group>
                                </a-form-item>
                            </a-col>

                        </a-row>
                        <a-row>
                            <a-col :span="10" style="text-align: left">
                                <a-button type="primary" @click="adds">新增</a-button>
                            </a-col>
                            <a-col :span="24" style="text-align: right">
                                <a-button type="primary" html-type="submit">查询</a-button>
                                <a-button style="margin: 0 8px"
                                    @click="() => { formRef.resetFields(); onFinish() }">重置</a-button>

                            </a-col>
                        </a-row>
                    </a-form>
                    <a-table bordered :data-source="dataSource" :columns="columns"
                        :pagination="{ current, pageSize, total: totalCount }" @change="pageClick">

                        <template #bodyCell="{ column, text, record }">

                            <template v-if="column.dataIndex == 'gender'">
                                <span :style="{ color: record.gender != 0 ? '#0000FF' : '#FFC0CB' }">{{ record.gender != 0 ?
                                    '男' : "女" }}</span>
                            </template>
                            <template v-if="column.dataIndex == 'state'">
                                <span :style="{color:share.getTechStatus(record.state)[1]}">{{ share.getTechStatus(record.state)[0] }}</span>
                            </template>
                            <template v-if="column.dataIndex == 'account_status'">
                                <span :style="{ color: record.account_status == 0 ? 'green' : 'skyblue' }">{{
                                    record.account_status
                                    == 0 ?
                                    '正常' : "冻结" }}</span>
                            </template>


                            <template v-if="column.dataIndex === 'operation'">
                                <a-popconfirm :title="record.account_status != 0 ? '真的要解除冻结吗?' : '确定要冻结吗'"
                                    @confirm="record.account_status == 0 ? dj(record) : jd(record)">
                                    <a :style="{ color: share.color, marginLeft: '15px' }">{{ record.account_status == 0
                                        ? "冻结" : "解冻"
                                    }}</a>

                                </a-popconfirm>
                                <span :style="{ marginLeft: '15px', color: share.color }"
                                    @click="showModal(record.uid)">详情</span>
                                <span :style="{ marginLeft: '15px', color: share.color }"
                                    @click="logsModal(record.uid)">流水</span>
                            </template>
                            <template v-if="column.dataIndex == 'image'">
                                <a-image :width="100" :heigth="150" :src='share.http + `/${record.dir}/${record.image}`' />
                            </template>
                            <template v-if="column.dataIndex == 'superior'">
                                <span>{{ record.superior_nickname }}</span>
                            </template>
                            <template v-if="column.dataIndex === 'update'">
                                <span :style="{ marginLeft: '15px', color: share.color }"
                                    @click="idCardModal(record)">身份证</span>
                                <span :style="{ marginLeft: '15px', color: share.color }"
                                    @click="cardModal(record.uid)">银行卡</span>
                                <span :style="{ marginLeft: '15px', color: share.color }"
                                    @click="imageModal(record.uid)">形象照</span>
                                <span :style="{ marginLeft: '15px', color: share.color }"
                                    @click="lifeModal(record.uid)">生活照</span>
                                <span :style="{ marginLeft: '15px', color: share.color }"
                                    @click="proveModal(record.uid)">健康证</span>
                                <span :style="{ marginLeft: '15px', color: share.color }"
                                    @click="geModal(record.uid)">个人简介</span>
                            </template>
                        </template>
                    </a-table>
                </div>
            </a-tab-pane>
        </a-tabs>
        <!-- 技师详情 -->
        <a-modal v-model:visible="visible" title="技师详情" :width="1140" @cancel="handleCancel" style="overflow: auto;"
            :cancelButtonProps="{ type: 'danger' }">
            <template #footer>
                <a-button type="primary" @click="handleOk">确定</a-button>
            </template>
            <div class="modalBox">
                <div class="left">
                    <p>
                        <span class="title">技师名称:</span>
                        <span class="value">{{ modalData.name }} </span>
                    </p>
                    <p>
                        <span class="title">技师性别:</span>
                        <span class="value">{{ modalData.gender == 0 ? '女' : '男' }}</span>
                    </p>
                    <p>
                        <span class="title">技师UID:</span>
                        <span class="value">{{ modalData.uid }}</span>
                    </p>
                    <p>
                        <span class="title">技师电话:</span>
                        <span class="value">{{ modalData.phone }}</span>
                    </p>
                    <p>
                        <span class="title">上级代理:</span>
                        <span class="value">{{ modalData.superior_nickname }}</span>
                    </p>
                    <p>
                        <span class="title">注册时间:</span>
                        <span class="value">{{ modalData.register_date }}</span>
                        <span class="title" style="margin-left: 60px;">最后登录:</span>
                        <span class="value">{{ modalData.lastLogin_date }}</span>
                    </p>
                    <div class="minBox" style="margin-top: 40px;">
                        <p>
                            <span class="title">个人简介:</span>
                            <span class="title" style="margin-left: 260px;" v-if="modalData.blurb">发布日期:</span>
                            <span class="value" v-if="modalData.blurb">{{ modalData.release_date }}</span>
                        </p>
                        <p v-if="modalData.blurb">
                            <textarea cols="80" rows="3">{{ modalData.blurb }}</textarea>
                        </p>
                        <div style="display: flex;justify-content: space-between;width: 72%;margin-top: -10px;">
                            <p>
                                <span class="title">审核结果:</span>
                                <span class="value"
                                    :style="{ color: modalData.blurb_examine == 0 ? 'gray' : (modalData.blurb_examine == 1 ? 'green' : 'red') }">{{
                                        modalData.blurb_examine == 0 ? '待审核' : (modalData.blurb_examine == 1 ? '审核通过' : '审核未通过')
                                    }}</span>
                            </p>
                            <p>
                                <span class="title" v-if="modalData.blurb_examine != 0">审批人员:</span>
                                <span class="value" v-if="modalData.blurb_examine != 0">{{
                                    modalData.value3 }}</span>
                            </p>
                            <p>
                                <span class="title" v-if="modalData.blurb_examine != 0">审核日期:</span>
                                <span class="value" v-if="modalData.blurb_examine != 0">{{ modalData.blurb_examine_date
                                }}</span>
                            </p>

                        </div>
                        <p>
                            <textarea id="" cols="80" rows="3" style="margin-top: -10px;"
                                v-if="modalData.blurb_examine == 2">{{ modalData.blurb_examine_reason }}</textarea>
                        </p>
                        <div style="display: flex;justify-content: space-between;width: 72%;margin-top: 40px;"
                            v-if="!((modalData.state == 0 || modalData.state == 1 || modalData.state == 3) && modalData.account_status == 0)">
                            <p>
                                <span class="title">账号状态:</span>
                                <span class="value"
                                    :style="{ color: modalData.account_status == 0 ? 'green' : 'skyblue' }">{{
                                        modalData.account_status == 0 ? '正常' : "冻结" }}</span>
                            </p>
                            <p>
                                <span class="title" v-if="modalData.account_status != 0">操作人员:</span>
                                <span class="value" v-if="modalData.account_status != 0">{{ modalData.value6 }}</span>
                            </p>
                            <p>
                                <span class="title" v-if="modalData.account_status != 0">冻结日期:</span>
                                <span class="value" v-if="modalData.account_status != 0">{{ modalData.freeze }}</span>
                            </p>
                        </div>
                        <p>
                            <span class="title" v-if="modalData.account_status == 1">冻结原因:</span>
                        </p>
                        <p>
                            <textarea id="" cols="80" rows="3" style="margin-top: -10px;"
                                v-if="modalData.account_status == 1">{{ modalData.reason }}</textarea>
                        </p>
                        <div style="display: flex;justify-content: space-between;width: 72%;margin-top: 40px;"
                            v-if="!((modalData.state == 0 || modalData.state == 1 || modalData.state == 3) && modalData.account_status == 0)">
                            <p>
                                <span class="title">工作状态:</span>
                                <span class="value" :style="{color:share.getTechStatus(modalData.state)[1]}">{{ share.getTechStatus(modalData.state)[0] }}</span>

                            </p>
                            <p>
                                <span class="title" v-if="modalData.state > 1 && modalData.state != 3">操作人员:</span>
                                <span class="value" v-if="modalData.state > 1 && modalData.state != 3">{{
                                    modalData.value6 }}</span>
                            </p>
                            <p>
                                <span class="title" v-if="modalData.state > 1 && modalData.state != 3">审核日期:</span>
                                <span class="value" v-if="modalData.state > 1 && modalData.state != 3">{{
                                    modalData.post_date }}</span>
                            </p>
                        </div>
                        <div style="display: flex;justify-content: space-between;width: 72%;"
                            v-if="(modalData.state == 0 || modalData.state == 1 || modalData.state == 3) && modalData.account_status == 0">
                            <p>
                                <span class="title">账号状态:</span>
                                <span class="value"
                                    :style="{ color: modalData.account_status == 0 ? 'green' : 'skyblue' }">{{
                                        modalData.account_status == 0 ? '正常' : "冻结" }}</span>
                            </p>
                            <p>
                                <span class="title">工作状态:</span>
                                <span class="value" :style="{ color: 'gray' }" v-if="modalData.state == 0">
                                    初级考核
                                </span>
                                <span class='value' :style="{ color: '#FFFF00' }" v-if="modalData.state == 1">
                                    待审核
                                </span>
                                <span class='value' :style="{ color: 'red' }" v-if="modalData.state == 2">
                                    审核不通过
                                </span>
                                <span class="value" :style="{ color: '#008000' }" v-if="modalData.state == 3">
                                    上岗
                                </span>

                            </p>
                        </div>
                        <p v-if="modalData.state == 2">
                            <span class="title">审核不通过原因:</span>
                        </p>
                        <p v-if="modalData.state == 2">
                            <textarea id="" cols="80" rows="3"
                                style="margin-left: 10px;margin-top: -10px;">{{ modalData.status_summary }}</textarea>
                        </p>
                    </div>
                    <div class="title" style="margin-top: 40px;margin-bottom: 20px;">
                        银行卡信息:
                    </div>
                    <a-table bordered :data-source="cardData" :columns="cardClu" :scroll="{ y: 500 }" style="width: 90%;">

                        <template #bodyCell="{ column, text, record }">
                            <template v-if="column.dataIndex == 'silent'">
                                <a-tag color="purple" v-if="record.silent == 1">默认地址</a-tag>
                                <span v-else></span>
                            </template>
                        </template>
                    </a-table>
                </div>
                <div class="right">
                    <div class="xxz">
                        <a-image width="100%" :src="share.http + `/${modalData.image_dir}/${modalData.image}`" />
                        <p v-if="modalData.image_examine != 0">
                            <span class="title">审核人员:</span>
                            <span class="value">{{ modalData.value2 }}</span>
                        </p>
                        <p v-if="modalData.image_examine != 0">
                            <span class="title">审批日期:</span>
                            <span class="value">{{ modalData.image_examine_date}}</span>
                        </p>
                        <p>
                            <span class="title">形象照审核结果:</span>
                            <span class='value' :style="{ color: share.getExamineState(modalData.image_examine)[1] }" v-if="modalData.image_examine">{{share.getExamineState(modalData.image_examine)[0] }}</span>
                            <span class="value" :style="{ color: 'red' }" v-else>
                                无
                            </span>
                        </p>

                        <p v-if="modalData.image_examine == 2">
                            <span class="title">未通过原因:</span>
                        </p>
                        <p v-if="modalData.image_examine == 2">
                            <textarea cols="30" rows="3">{{ modalData.image_examine_reason }}</textarea>
                        </p>
                    </div>
                    <div class="life">
                        <a-carousel autoplay style="height: 300px;">
                            <a-image :height="300" v-for="item in modalData.lifephoto?.split(',')" :key="item"
                                :src="share.http + `/${modalData.lifephoto_dir}/${modalData.uid}/${item}`"></a-image>
                        </a-carousel>
                        <p v-if="modalData.life_examine != 0">
                            <span class="title">审核人员:</span>
                            <span class="value">{{ modalData.value1 }}</span>
                        </p>
                        <p v-if="modalData.life_examine != 0">
                            <span class="title">审批日期:</span>
                            <span class="value">{{ modalData.life_examine_date }}</span>
                        </p>
                        <p v-if="modalData.life_examine != 0">
                            <span class="title">审批日期:</span>
                            <span class="value">{{ modalData.life_examine_date }}</span>
                        </p>
                        <p>
                            <span class="title">生活照审核结果:</span>
                            <span class='value' :style="{ color: share.getExamineState(modalData.life_examine)[1] }" v-if="modalData.life_examine">{{share.getExamineState(modalData.life_examine)[0] }}</span>
                            <span class="value" :style="{ color: 'red' }" v-else>
                                无
                            </span>
                        </p>

                        <p v-if="modalData.life_examine == 2">
                            <span class="title">未通过原因:</span>
                        </p>

                        <p v-if="modalData.life_examine == 2">
                            <textarea cols="30" rows="3">{{ modalData.life_examine_reason }}</textarea>
                        </p>
                    </div>
                    <div class="sfz">
                        <a-carousel autoplay style="height: 300px;">
                            <a-image v-for="item in [].concat(modalData.card, modalData.card_side)" :key="item"
                                :src="share.http + `/${modalData.card_dir}/${modalData.uid}/${item}`"
                                :height="195"></a-image>
                        </a-carousel>
                        <p v-if="modalData.idcard_examine - 0">
                            <span class="title">审核人员:</span>
                            <span class="value">{{ modalData.value4 }}</span>
                        </p>
                        <p v-if="modalData.idcard_examine - 0">
                            <span class="title">审批日期:</span>
                            <span class="value">{{ modalData.life_examine_date }}</span>
                        </p>
                        <p>
                            <span class="title">身份证审核结果:</span>
                            <span class='value' :style="{ color: share.getExamineState(modalData.idcard_examine)[1] }" v-if="modalData.idcard_examine">{{share.getExamineState(modalData.idcard_examine)[0] }}</span>
                            <span class="value" :style="{ color: 'red' }" v-else>
                                无
                            </span>
                        </p>
                        <p v-if="modalData.idcard_examine == 2">
                            <span class="title">未通过原因:</span>
                        </p>

                        <p v-if="modalData.idcard_examine == 2">
                            <textarea cols="30" rows="3">{{ modalData.life_examine_reason }}</textarea>
                        </p>
                    </div>
                    <div class="jkz">
                        <a-image width="100%"
                            :src="share.http + `/${modalData.health_dir}/${modalData.uid}/${modalData.health}`" />
                        <p v-if="modalData.prove_examine - 0">
                            <span class="title">审核人员:</span>
                            <span class="value">{{ modalData.value5 }}</span>
                        </p>
                        <p v-if="modalData.prove_examine - 0">
                            <span class="title">审批日期:</span>
                            <span class="value">{{ modalData.prove_examine_date }}</span>
                        </p>
                        <p>
                            <span class="title">健康证审核结果:</span>
                            <span class='value' :style="{ color: share.getExamineState(modalData.prove_examine)[1] }" v-if="modalData.prove_examine">{{share.getExamineState(modalData.prove_examine)[0] }}</span>
                            <span class="value" :style="{ color: 'red' }" v-else>
                                无
                            </span>
                        </p>
                        <p v-if="modalData.prove_examine == 2">
                            <span class="title">未通过原因:</span>
                        </p>

                        <p v-if="modalData.idcard_examine == 2">
                            <textarea cols="30" rows="3">{{ modalData.prove_examine_reason }}</textarea>
                        </p>
                    </div>
                </div>
            </div>

        </a-modal>
        <!-- 技师冻结 -->
        <a-modal v-model:visible="djModal" title="技师冻结原因" :width="400"
            style="overflow: auto;padding-left: 20px;box-sizing: border-box;" :cancelButtonProps="{ type: 'danger' }">
            <template #footer>
                <a-button type="primary" @click="djOK">确定</a-button>
            </template>
            <textarea v-model="djData" :rows="5" :cols="50"></textarea>
        </a-modal>
        <!-- 技师流水 -->
        <a-modal v-model:visible="logsShow" title="技师流水" :width="1170"
            style="overflow: auto;padding-left: 20px;box-sizing: border-box;" :cancelButtonProps="{ type: 'danger' }">
            <template #footer>
                <a-button type="primary" @click="logsCancel">确定</a-button>
            </template>
            <div class="logsBox">
                <div class="titles">
                    <p style="color: #333;font-size: 24px;">{{ logsData.data.name }}</p>
                    <p></p>
                    <p>
                        <span class="title">IP:</span>
                        <span class="value">{{ '' }}</span>
                    </p>
                    <p>
                        <span class="title">技师UID:</span>
                        <span class="value">{{ logsData.data.uid }}</span>
                    </p>
                    <p>
                        <span class="title">联系电话:</span>
                        <span class="value">{{ logsData.data.phone }}</span>
                    </p>
                    <p>
                        <span class="title">注册时间:</span>
                        <span class="value">{{ logsData.data.register_date }}</span>
                    </p>
                    <p>
                        <span class="title">最后登录时间:</span>
                        <span class="value">{{ logsData.data.lastLogin_date }}</span>
                    </p>
                </div>
                <div class="status" v-if="logsData.data.account_status == 1">
                    <p style="color:#333;font-size: 18px;">账户已冻结</p>
                    <p></p>
                    <p>
                        <span class="title">操作人</span>
                        <span class="value">{{ logsData.data.value6 }}</span>
                    </p>
                    <p>
                        <span class="title">冻结时间:</span>
                        <span class="value">{{ logsData.data.freeze }}</span>
                    </p>
                    <p>
                        <span class="title">冻结时间:</span>
                        <span class="value">{{ logsData.data.freeze }}</span>
                    </p>
                    <p style="width: 100%;">
                        <span class="title">冻结原因:</span>
                    </p>
                    <textarea style="width: 100%;border-radius: 4px;" rows="3">{{ logsData.data.reason }}</textarea>
                </div>
                <div class="static" :style="{ marginTop: logsData.data.account_status == 1 ? '60px' : '' }">
                    <p style="color:#333;font-size: 18px;">技师余额信息</p>
                    <div class="cardBox">
                        <a-row :gutter="16" justify="space-between">
                            <a-col :span="logsData.data.account_status == 1 ? 6 : 8">
                                <div class="card" style="color:#5DFE8A ">
                                    <span> 可用金额</span>
                                    <p>{{ logsData.data?.available_balance }}</p>
                                </div>
                            </a-col>
                            <a-col :span="logsData.data.account_status == 1 ? 6 : 8">
                                <div class="card" style="color:#93D8FF">
                                    <span> 冻结金额</span>
                                    <p>{{ logsData.data?.frozen_amount }}</p>
                                </div>
                            </a-col>
                            <a-col :span="logsData.data.account_status == 1 ? 6 : 8">
                                <div class="card" style="color:#FFC24C">
                                    <span> 保证金</span>
                                    <p>{{ logsData.data?.deposit }}</p>
                                </div>
                            </a-col>
                        </a-row>
                    </div>
                </div>
            </div>
            <div style="margin-top: 43px;">
                <p style="color:#333;font-size: 18px;">金额流水表</p>
                <a-table :columns="logsCom" :data-source="logsData.logs" :pagination="{ pageSize: 50 }" :scroll="{ y: 240 }"
                    :customRow="record => { return { onClick: () => handleRowClick(record) } }">

                    <template #bodyCell="{ column, text, record }">

                        <template v-if="column.dataIndex == 'type'">
                            <span v-if="record.type == 0" style="color:#FFC24D">收入</span>
                            <span v-if="record.type == 1" style="color:#5DFE8A">提现</span>
                            <span v-if="record.type == 2" style="color:#FF7967">消费</span>
                        </template>

                    </template>
                </a-table>
            </div>
        </a-modal>
        <!-- 技师提现 -->
        <a-modal v-model:visible="TXModal" title="技师提现" :width="720" @cancel="TXCancel"
            style="overflow: auto;padding-left: 20px;box-sizing: border-box;" :cancelButtonProps="{ type: 'danger' }">
            <template #footer>
                <a-button type="primary" @click="TXCancel">确定</a-button>
            </template>
            <div class="cz">
                <p style="font-size: 24px;color: #333;">
                    {{ logsData.data.name }}
                </p>
                <p></p>

                <p>
                    <span class="title">提现金额(元):</span>
                    <span class="value" style="color:#333">{{ TXData.withdrawal_amount }}</span>
                </p>
                <p>
                    <span class="title">提现银行:</span>
                    <span class="value" style="color:#333">{{ TXData.bank_name }}</span>
                </p>
                <p>
                    <span class="title">提现日期:</span>
                    <span class="value">{{ TXData.date_time }}</span>
                </p>
                <p>
                    <span class="title">开户行:</span>
                    <span class="value">{{ TXData.bank }}</span>
                </p>
                <p>
                    <span class="title">银行卡号:</span>
                    <span class="value">{{ TXData.card }}</span>
                </p>
                <p>
                    <span class="title">户名:</span>
                    <span class="value">{{ TXData.account_name }}</span>
                </p>
                <p>
                    <span class="title">提现状态:</span>
                    <span :style="{ color: share.getExamineState(TXData.examine)[1] }">{{share.getExamineState(TXData.examine)[0] }}</span>
                </p>
                <p v-if="TXData.examine > 0">
                    <span class="title">审批人员:</span>
                    <span class="value">{{ TXData.roved_by }}</span>
                </p>
                <p v-if="TXData.examine > 0">
                    <span class="title">审批日期:</span>
                    <span class="value">{{ TXData.examine_date }}</span>
                </p>
                <p v-if="TXData.examine == 2">
                    <span class="title">不通过原因:</span>
                </p>
                <textarea v-if="TXData.examine == 2" cols="70" rows="3">{{ TXData.reason }}</textarea>
            </div>
        </a-modal>
        <!-- 技师新增 -->
        <a-modal v-model:visible="addModal" title="技师新增" :width="850" @ok="addOk" :destroyOnClose="true" :z-index="20">
            <a-form ref="addForm" :model="addFormState" name="dynamic_rule">

                <a-form-item label="技师名称" name="nickname"
                    :rules="[{ required: true, message: '请输入名称' }, { validator: share.validate }]">
                    <a-input v-model:value="addFormState.nickname" />
                </a-form-item>
                <a-form-item label="代理手机号" name="phone" :rules="[{ validator: validateIdentifyCode }]">
                    <a-input v-model:value="addFormState.phone" />
                </a-form-item>
                <a-form-item label="上级代理" name="super">
                    <a-radio-group v-model:value="addFormState.super" name="super">
                        <a-radio value="">无</a-radio>
                        <a-radio :value="item.uid" v-for="item in superData">{{ item.superior_nickname }}</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="在岗状态" name="state">
                    <a-radio-group v-model:value="addFormState.state" name="state">
                        <a-radio :value="0">初级考核</a-radio>
                        <a-radio :value="1">待审核</a-radio>
                        <a-radio :value="2">审核不通过</a-radio>
                        <a-radio :value="3">上岗</a-radio>
                        <a-radio :value="4">离职</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="性别" name="gender">
                    <a-radio-group v-model:value="addFormState.gender" name="gender">
                        <a-radio :value="0">女</a-radio>
                        <a-radio :value="1">男</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="技师抽成率(%)" name="tech_rate" :rules="[{ validator: validayeNUmber }]">
                    <a-input-number v-model:value="addFormState.tech_rate" />
                </a-form-item>
                <a-form-item label="可用余额" name="available_balance" :rules="[{ validator: validayeNUmber }]">
                    <a-input-number v-model:value="addFormState.available_balance" />
                </a-form-item>
                <a-form-item label="冻结余额" name="frozen_amount" :rules="[{ validator: validayeNUmber }]">
                    <a-input-number v-model:value="addFormState.frozen_amount" />
                </a-form-item>
                <a-form-item label="保证金" name="deposit" :rules="[{ validator: validayeNUmber }]">
                    <a-input-number v-model:value="addFormState.deposit" />
                </a-form-item>
            </a-form>

        </a-modal>
        <!-- 银行卡上传 -->
        <cardImageZhu :uid="cardUid" :shows="cardShow" @setShow="changeCard" />
        <!-- 形象照修改或上传 -->
        <techImageZhu :uid="imgUid" :shows="imageShow" @setShow="changeImg" />
        <!-- 个人简介修改或上传 -->
        <proveZhu :uid="geUid" :shows="geSHow"  @setShow="changeGe"/>
        <!-- 身份证修改或上传 -->
        <idCardImageZhu :idCardData="idCardTechData" :shows="idCardShow"  @setShow="changeIdCard"/>
        <!-- 健康证修改或者上传 -->
        <healthImageZhu :uid="healthUid" :shows="healthShow"  @setShow="changeHealth"/>
        <!-- 生活照修改或上传 -->
        <lifeImageZhu :uid="lifeUid" :shows="lifeShow"  @setShow="changeLife"/>
    </div>
</template>


<script setup>
import cardImageZhu from './techComponents/cardImage.vue';
import techImageZhu from './techComponents/techImage.vue';
import proveZhu from './techComponents/prove.vue';
import idCardImageZhu from './techComponents/idCardImage.vue'; 
import healthImageZhu from './techComponents/healthImage.vue'
import lifeImageZhu from './techComponents/lifeImage.vue'
import { useRouter } from 'vue-router';
import { useUserData } from '../../../stores/userData';
import { ref, onMounted, reactive} from 'vue'
import share from '../../../util/commnet'
import { techStatAPI, logsAPI } from '../../../api/management'
import { message } from 'ant-design-vue';
import {debounce} from 'lodash'

const router = useRouter();         //router
const store = useUserData()        //pinia
const activeKey = ref('static'); //分页栏
const formRef = ref('');    //搜索数据

const formState = reactive({  //搜素内容
    name: '',
    phone: "",
    superior: '',
    gender: '',
    account_status: "",

});



const onFinish = () => {
    pageClick();
}


const debouncePageClick = debounce(async (item) => {            //技师表格页面进行变化的时候进行节流
  item ? current.value = item.current : current.value = 1;
  let res = await techStatAPI(`sel|${pageSize.value}:${current.value}:${formState.account_status}:${formState.gender}:${formState.superior}:${formState.phone}:${formState.name}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
  console.log(res);
  dataSource.value = res.data;
  totalCount.value = res.total - 0;
}, 300);

const pageClick = (item) => {
    debouncePageClick(item);
};


// 详情页面----------------------------------------------------
const modalData = ref({})       //详情数据
const showModal = async (uid) => { //点击详情进行弹窗
    visible.value = true;
    let res = await techStatAPI(`selectDan|${uid}|${store.data.token}|${store.data.uuid}|${store.data.phone}`)
    let card = await techStatAPI(`selBank|${uid}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
    console.log(res);
    if (!res || res.code == 406 || card.code == 406) {
        message.error("账号失效");
        router.replace({ name: "login" });
        return;
    } else if (res.code != 200 || card.code != 200) {
        console.log(res, card);
        message.error(res.message);
        return;
    }
    cardData.value = card.data;
    modalData.value = res.data[0];

}

const cardData = ref([]);
const cardClu = [
    {
        title: "银行名称",
        dataIndex: "bank_name"
    },
    {
        title: "卡号",
        dataIndex: "card"
    },
    {
        title: "开户行",
        dataIndex: "bank"
    },
    {
        title: "户名",
        dataIndex: "account_name"
    },
    {
        title: "是否默认",
        dataIndex: "silent"
    }
]


const handleOk = () => {
    visible.value = false;
}
const handleCancel = () => {
    visible.value = false;
}

//是否冻结
const dj = (item) => {
    djModal.value = true;
    djData.value = '';
    djUid.value = item.uid;
}
const djOK = async () => {
    if (djData.value.includes("|")) {
        message.error("含有非法字符|")
        return
    }
    let res = await techStatAPI(`dj|${djUid.value}|${djData.value}|${store.data.uid}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
    if (!res || res.code == 406) {
        message.error("账号失效");
        router.replace({ name: 'login' });
        return;
    } else if (res.code != 200) {
        console.log(res);
        message.error(res.message);
        return
    }
    message.success(res.message)
    djModal.value = false;
    pageClick();
}

const djModal = ref(false);  //冻结弹窗
const djData = ref('');        //冻结原因
const djUid = ref('');          //冻结技师的唯一标识

const jd = async (item) => {  //解冻
    let res = await techStatAPI(`jd|${item.uid}|${store.data.uid}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
    if (!res || res.code == 406) {
        message.error("账号失效");
        router.replace({ name: 'login' });
        return;
    } else if (res.code != 200) {
        console.log(res);
        message.error(res.message);
        return
    }
    console.log(res);
    message.success(res.message);
    pageClick();
}
const visible = ref(false);  //详情弹窗
const maxData = ref([]);        //统计数据
const dataSource = ref([{}]);   //表格数据
const totalCount = ref(0);      //总条
const pageSize = ref(10);       //一页多少条
const current = ref(1);         //当前页
const columns = [{
    title: '技师名称',
    dataIndex: 'name',
    align: 'center'

}, {
    title: '性别',
    dataIndex: 'gender',
    width: "100px",
    align: 'center'

}, {
    title: '电话',
    dataIndex: 'phone',
    align: 'center'

}, {
    title: "注册时间",
    dataIndex: 'register_date',
    align: 'center'

}, {
    title: '上级代理',
    dataIndex: 'superior',
    align: 'center'

}, {
    title: "是否上岗",
    dataIndex: "state",
    align: 'center'

}, {
    title: "账号冻结",
    dataIndex: "account_status",
    align: 'center'

}, {
    title: '操作',
    dataIndex: 'operation',
    align: 'center'

}, {
    title: '上传',
    dataIndex: 'update',
    align: 'center'
}];

//流水区域
const logsShow = ref(false);
const logsCom = [
    {
        title: '交易时间',
        dataIndex: "timestamp",
        key: "timestamp"
    },
    {
        title: '类型',
        dataIndex: "type",
        key: "type",
        width: 50
    },
    {
        title: '交易金额(元)',
        dataIndex: "amount",
        key: "amount"
    },
    {
        title: '操作后余额',
        dataIndex: "balance",
        key: "balance"
    },
    {
        title: '交易描述',
        dataIndex: "notes",
        key: "notes",
        ellipsis: true,
        width: 250
    },
    {
        title: '交易单号',
        dataIndex: "orderg_uid",
        key: "orderg_uid",
        width: 250
    },

]
const logsData = reactive({
    data: {},
    logs: []
});
const logsModal = async (uid) => {
    let res = await logsAPI(`tech|${uid}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
    if (!res || res.code == 406) {
        message.error("账号失效");
        router.replace({ name: 'login' });
        return;
    } else if (res.code != 200) {
        console.log(res);
        message.error(res.message);
        return
    }
    console.log(res);
    logsShow.value = true;
    logsData.data = res.data[0];
    logsData.logs = res.logs;
}
const logsCancel = () => {
    logsShow.value = false;
}


const handleRowClick = async (item) => {
    if (item.type == 1) {  //技师提现
        let res = await logsAPI(`techTX|${item.technician_uid}|${item.orderg_uid}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
        if (!res || res.code == 406) {
            message.error("账号失效");
            router.replace({ name: 'login' });
            return;
        } else if (res.code != 200) {
            console.log(res);
            message.error(res.message);
            return
        }
        TXData.value = res.data[0];
        TXModal.value = true;
        console.log(TXData.value);
    }
    
}




//技师提现数据
const TXModal = ref(false);
const TXData = ref('')
const TXCancel = () => {
    TXModal.value = false;

}


// 技师新增---------------------------------------------------------
const addForm = ref(null);
const addModal = ref(false);
const superData = ref([])
const adds = async () => {
    let res = await techStatAPI(`selType|${store.data.token}|${store.data.uuid}|${store.data.phone}`)
    if (!res || res.code == 406) {
        message.error("账号失效");
        router.replace({ name: 'login' });
        return;
    } else if (res.code != 200) {
        console.log(res);
        message.error(res.message);
        return
    }
    superData.value = res.data;
    addModal.value = true
}
const addFormState = ref({
    nickname: "",
    phone: '',
    super: '',
    tech_rate: 0,
    state: 3,
    gender: 0,
    deposit: 0,
    available_balance: 0,
    frozen_amount: 0
});
const validateIdentifyCode = (rule, value) => {    //手机号码验证
    if (!/^1[3456789][0-9]{9}$/.test(value)) {
        return Promise.reject('手机号格式不正确');
    } else {
        return Promise.resolve()
    }
};
const validayeNUmber = (rule, value) => {

    if (value >= 0) {
        return Promise.resolve()
    } else {
        return Promise.reject("不能小于0")
    }
}


const addOk = async () => {
    addForm.value.validateFields()
        .then(async re => {
            let res = await techStatAPI(`add|${addFormState.value.nickname}|${share.convertToPinyin(addFormState.value.nickname)}|${addFormState.value.phone}|${addFormState.value.super}|${addFormState.value.tech_rate}|${addFormState.value.state}|${addFormState.value.gender}|${addFormState.value.available_balance}|${addFormState.value.deposit}|${addFormState.value.frozen_amount}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
            if (res.code == 406) {
                message.error("账号失效");
                router.replace({ name: 'login' });
                return;
            } else if (res.code != 200) {
                message.error(res.message);
                return
            }
            message.success("添加成功");
            addForm.value.resetFields();
            addModal.value = false;
            pageClick();

        })

}


// 上传操作-----------------------------------------------------------------------

// 1.银行卡-----------------------------------------------------------------
const cardShow = ref(false);        //展开银行卡模块
const cardUid = ref('');            //银行卡uid
const cardModal = async (uid) => {  //打开模块
    cardShow.value = true;
    cardUid.value = uid;
}
const changeCard = (v)=>{           //关闭模块
    cardShow.value = v;
}


// 2.形象照上传或者修改------------------------------------------------------
const imageShow = ref(false);   //展开形象照模块
const imgUid = ref('');         //形象照uid
const imageModal = async (uid) => {         //打开模块
    imgUid.value = uid;
    imageShow.value = true;
}
const changeImg = (v)=>{                    //关闭模块
    imageShow.value = v;
}


// 3.个人简介上传或修改--------------------------------------------------------
const geSHow = ref(false);          //展开个人简介模块
const geUid = ref("");              //uid
const geModal = async (uid) => {    //打开模块
    geUid.value = uid;
    geSHow.value = true;
}
const changeGe = (v)=>{             //关闭模块
    geSHow.value = v;
}


// 4.身份证操作----------------------------------------------------------------
const idCardShow = ref(false);  //展开身份证操作模块
const idCardTechData = ref({}); //获取技师手机号 token uuid
const idCardModal = async (i) => {
    idCardTechData.value = dataSource.value.find(item => item == i);//获取技师的基本信息
    idCardShow.value = true;
}
const changeIdCard= (v)=>{              //子组件关闭模块方法
    idCardShow.value = v;
}


// 5.健康证操作----------------------------------------------------------------
const healthShow = ref(false);           //展示健康证模块
const healthUid = ref('');                  //当前健康证的技师uid
const proveModal = async (uid) => {     //打开健康证页面
    healthUid.value = uid;
    healthShow.value = true;
}
const changeHealth = (v)=>{              //子组件关闭模块方法
    healthShow.value = v;
}


// 6.生活照操作--------------------------------------------------------------
const lifeShow = ref(false);    //当前是否显示
const lifeUid = ref('');        //生活照技师的uid
const changeLife = (v)=>{               //子组件关闭模块方法
    lifeShow.value = v;
}
const lifeModal = async(uid)=>{         //需要显示生活照模块时
    lifeUid.value = uid;                //传递uid
    lifeShow.value = true;              //打开模块
}




//加载页面时
onMounted(async () => {
    let res = await techStatAPI(`stat|${store.data.token}|${store.data.uuid}|${store.data.phone}`);  //统计
    console.log(res);
    let techData = await techStatAPI(`sel|${pageSize.value}:${current.value}:::::|${store.data.token}|${store.data.uuid}|${store.data.phone}`)  //表格数据
    console.log(techData);
    if (!res || res.code == 406 || !techData || techData.code == 406) {
        message.error("账号失效");
        router.replace({ name: 'login' });
        return;
    } else if (res.code != 200 || techData.code != 200) {
        message.error(res.message);
        return
    }
    maxData.value = res.data;
    dataSource.value = techData.data;
    totalCount.value = techData.total - 0;
})


</script>


<style scoped src="../../css/management/technician.scss"></style>